<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="images/logo W.jpg" />
        <title>Work to Worker</title>
        <style>
            a:link {text-decoration:none;} 
        </style>
        <style type="text/css">
            @font-face {
                font-family: "jokerman";
                src: url('font/VIVALDII.TTF') format("truetype");
            }   
            .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 13px; }
            .ui-widget .ui-widget { font-size: 1em; }
            @media screen and (-webkit-min-device-pixel-ratio:0)
            { 
                #m1 {margin-top: 77px;margin-left: 100px}
            }
            @-moz-document url-prefix()
            {
                #m1 {margin-top: 71px;margin-left: 60px}
            }
        </style>       
        <script src="js/jquery-1.9.1.js"/>    
        <script type="text/javascript">
            $(function() {
                $(".jobtitle > a > span").each(function(i) {
                    len = $(this).text().length;
                    if (len > 28)
                    {
                        $(this).text($(this).text().substr(0, 28) + '...');
                    }
                });
            });
            $(function() {
                $(".namecate").each(function(i) {
                    len = $(this).text().length;
                    if (len > 22)
                    {
                        $(this).text($(this).text().substr(0, 22) + '...');
                    }
                });
            });
            $(function() {
                $(".namelocation").each(function(i) {
                    len = $(this).text().length;
                    if (len > 22)
                    {
                        $(this).text($(this).text().substr(0, 22) + '...');
                    }
                });
            });
        </script>
        <script type="text/javascript">
            $(function() {
                $(".namecty").each(function(i) {
                    len = $(this).text().length;
                    if (len > 28)
                    {
                        $(this).text($(this).text().substr(0, 28) + '...');
                    }
                });
            });
        </script>
    </h:head>
    <h:body style="background-color: #1A3665">
        #{mSBController.cleanup()}
        <f:view locale="#{languageBean.locale}">
            <div style="width: 1000px;margin: auto;">
                <div style="text-align: right;margin-right: 10px;">                
                    <h:form >   
                        <ul>                    
                            <li style="display: inline;color: white">
                                <img src="images/vn.png" width="10" height="10" alt="vietnam"/><h:commandButton type="submit" action="#{languageBean.countryLocaleCodeChanged('vi_VN')}"  value="Tiếng Việt" style="border: none;cursor: pointer;background-color: #1A3665;color: white;font-family: Serif;font-size: 101%"/>
                            </li>
                            <li style="display: inline;margin-left: 10px;color: white">
                                <img src="images/uk.png" width="10" height="10" alt="vietnam"/><h:commandButton  type="submit" action="#{languageBean.countryLocaleCodeChanged('en')}" value="English" style="border: none;cursor: pointer;background-color: #1A3665;color: white;font-family: Serif;font-size: 101%"/>
                            </li>
                        </ul>
                    </h:form> 
                </div>
                <div style="border-top: 5px;border-top-style: solid;border-top-color: white;border-right: 5px;border-right-style: solid;border-right-color: white;border-left: 5px;border-left-style: solid;border-left-color: white;background-image: url('images/Untitled.png');height: 400px">

                    <ul style="margin-top: -50px">


                        <li style="display: inline-block;vertical-align: top;margin-top: 30px;">
                            <ul style="padding-top: 30px">
                                <li id="fix1" style="list-style: none;font-size: 50px;font-weight: bold;color: #0099ff;font-style: italic;font-family: jokerman;margin-left: -30px ">
                                    <font style="color: red">Work</font> <font style="color: #604E9D">to</font> <font style="color: blue">Worker</font>  
                                </li>
                            </ul>
                            <ul style="margin-top: -20px">
                                <li style="list-style: none;margin-left: 0px; font-size: 30px;color: red">
                                    <h:outputText value="We offer you the" /> <font style="font-weight: bold;font-style: italic;font-size: 50px;font-family: jokerman;color: blue"><h:outputText value="opportunity" /></font>
                                </li>
                            </ul>
                            <ul style="margin-top: 10px">
                                <li style="display: inline;font-size: 20px;background-color: #1A3665;padding: 5px 10px 5px 10px"><a href="login.xhtml" style="color: white;"><h:outputText value="#{msg['global.login']}" /></a></li>
                                <li style="display: inline;margin-left: 5px;color: #FF6600"> <h:outputText value="#{msg['global.or']}" />  </li>
                                <li style="display: inline;font-size: 20px;margin-left: 5px;background-color: #1A3665;padding: 5px 10px 5px 10px"><a href="signup.xhtml" style="color: white;"><h:outputText value="#{msg['global.signupfree']}" /></a> </li>
                            </ul>
                            <ul style="margin-top: 10px;margin-left: -30px;height: 140px;border-radius: 10px;-moz-border-radius: 10px;width: 600px">
                                <li style="list-style: none;font-size: 30px;color: #FF6600;padding-top: 10px">
                                    Your opportunity
                                </li>
                                <li style="list-style: none;margin-top: 5px">
                                    <h:form>
                                        <p:growl id="growl" showDetail="true" sticky="true" />
                                        <ul style="margin-top: 20px">
                                            <li style="display: inline;margin-left: -35px;">
                                                <h:selectOneMenu value="#{comboboxSearchBean.location}" id="anyLocation" >
                                                    <f:selectItem itemLabel="#{msg['global.location']}" itemValue="#{-1}" /> 
                                                    <f:selectItems value="#{comboboxSearchBean.locations}" var="loca" 	itemLabel="#{loca.name}" itemValue="#{loca.id}" />
                                                </h:selectOneMenu>  
                                            </li>
                                            <li style="display: inline;margin-left: 20px">
                                                <h:selectOneMenu value="#{comboboxSearchBean.category}" id="anyCategory" >
                                                    <f:selectItem itemLabel="#{msg['global.category']}" itemValue="#{-1}" /> 
                                                    <f:selectItems value="#{comboboxSearchBean.categorys}" var="cate"	itemLabel="#{cate.categoryName}" itemValue="#{cate.id}" />
                                                </h:selectOneMenu>  
                                            </li>
                                            <li style="display: inline;margin-left: 20px">
                                                <h:selectOneMenu value="#{comboboxSearchBean.loveljob}" id="anyJobLevel"  >
                                                    <f:selectItem itemLabel="#{msg['global.joblevel']}" itemValue="#{-1}" /> 
                                                    <f:selectItems value="#{comboboxSearchBean.loveljobs}" var="level" itemLabel="#{level.name}" itemValue="#{level.id}" />
                                                </h:selectOneMenu>  
                                            </li>
                                        </ul> 
                                        <ul>
                                            <li style="list-style: none;margin-left: 100px;margin-top: 20px">
                                                <h:commandButton  type="submit" value="#{msg['global.search']}" action="searchJobResult"  style="border-style: none;font-weight: bold;background-color: #1A3665;color: white;height: 30px;width:100px" >
                                                    <f:param name="idct" value='${comboboxSearchBean.category}'/>
                                                    <f:param name="idlj" value='${comboboxSearchBean.loveljob}'/>
                                                    <f:param name="idlc" value='${comboboxSearchBean.location}'/>
                                                </h:commandButton>
                                            </li>
                                        </ul>
                                    </h:form>
                                </li>
                            </ul>
                            <ul  id="m1">
                                <li style="display: inline;font-weight: bold;font-size: 20px;padding: 5px 65px 5px 65px;background-image: url('images/treeTabBg.gif');border-top-right-radius: 10px;border-top-left-radius: 10px;-moz-border-top-right-radius: 10px;-moz-border-top-left-radius: 10px">
                                    <a href="home.xhtml" style="color: black"> <h:outputText value="#{msg['global.home']}" /> </a>
                                </li>
                                <li style="display: inline;font-weight: bold;font-size: 20px;padding: 5px 55px 5px 65px;background-image: url('images/treeTabBg.gif');border-top-right-radius: 10px;border-top-left-radius: 10px;-moz-border-top-right-radius: 10px;-moz-border-top-left-radius: 10px">
                                    <a href="worker.xhtml" style="color: black"><h:outputText value="#{msg['global.worker']}" /> </a>
                                </li>
                                <li style="display: inline;font-weight: bold;font-size: 20px;padding: 5px 65px 5px 65px;background-image: url('images/treeTabBg.gif');border-top-right-radius: 10px;border-top-left-radius: 10px;-moz-border-top-right-radius: 10px;-moz-border-top-left-radius: 10px">
                                    <a href="employment.xhtml" style="color: black"> <h:outputText value="#{msg['global.employment']}" /> </a>
                                </li>
                            </ul>
                        </li>
                    </ul>                
                </div>
                <div style="background-color: white;margin-top: -9px">

                    <div>
                        <ul style="width: 700px;;margin-left: 100px;padding-top: 30px">
                            <li style="list-style: none;background-color: #00C2F3;color: white;font-weight: bold;padding: 5px 0px 5px 30px;font-size: 20px;border-radius: 10px;-moz-border-radius: 10px">
                                <h:outputText value="#{msg['global.hotcategory']}" />
                            </li>
                            <li style="display: inline-block;margin-top: 5px;vertical-align: top">
                                <ul style="width: 670px; margin-bottom: 20px;overflow: hidden;">
                                    <c:forEach items="#{categoryQuantityBean.list}" var="p">
                                        <li style="line-height: 2em;float: left;display: inline;width: 33.333%">
                                            <a href="job.xhtml?nameCategory=#{p.namecate}" style="text-decoration: underline;color: black">#{p.namecate}</a>
                                            <font style="color: #FF6600"> (#{p.quantity})</font></li>
                                    </c:forEach>
                                </ul>
                            </li>
                        </ul>
                        <ul style="width: 700px;;margin-left: 100px;padding-top: 0px">
                            <li style="list-style: none;background-color: #00C2F3;color: white;font-weight: bold;padding: 5px 0px 5px 30px;font-size: 20px;border-radius: 10px;-moz-border-radius: 10px">
                                <h:outputText value="#{msg['global.newjob']}" />
                            </li>
                            <li style="list-style: none;margin-top: 10px;width: 650px;margin-left: 14px">
                                <ui:repeat value="#{topTenJobBean.list}" var="tt">
                                    <ul class="jobsubject" style="width: 670px; margin-top: 5px; border: 1px;border-style: solid;border-radius: 10px;-moz-border-radius: 10px;padding: 5px 0px 5px 0px">
                                        <li style="display: inline-block;vertical-align: top; width: 320px;">
                                            <ul>
                                                <li style="list-style: none;font-weight: bold;font-size: 110%;color: #FF6600">
                                                    <div class="jobtitle">
                                                        <a href="customerProfilePreview.xhtml?idJobDetail=#{tt.id}" style="color: #FF6600;">
                                                            <span><h:outputText value="#{tt.title}"/> </span>
                                                        </a>
                                                    </div>
                                                </li>

                                                <li style="list-style: none;font-size: 90%">
                                                    <div class="namecty">#{tt.namecustomer}</div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li style="display: inline-block;vertical-align: top;width: 170px; margin-left: -10px;">
                                            <ul>
                                                <li style="list-style: none;font-size: 90%;margin-top: 3px; width: 160px;">
                                                    <div class="namecate">#{tt.namecate}</div>
                                                </li>
                                                <li style="list-style: none;font-size: 90%;margin-top: 3px; width: 160px;">
                                                    <div class="namelocation">#{tt.namelocation}</div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li style="display: inline-block;vertical-align: top">
                                            <ul>
                                                <li style="list-style: none;font-size: 90%;margin-top: 3px">
                                                    #{tt.nameleveljob}
                                                </li>
                                                <li style="list-style: none;font-size: 90%;margin-top: 3px">
                                                    #{tt.typejob}
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </ui:repeat>
                            </li>
                        </ul>
                    </div>
                    <br/>
                    <br/>
                </div>            
            </div>
            <div style="color: white; height: 100px;border-radius: 10px;-moz-border-radius: 10px;border: 1px;border-style: solid;border-color: white;margin-top: 20px">
                <div style="text-align: right; padding-top: 20px;padding-right: 30px">
                    Copyright © by Group 1
                    <br />
                    Project Name : Work to Worker
                    <br />
                    Member in Group : Mr Bùi Hồng Hải , Mr Nguyễn Văn Cường , Mr Nguyễn Nhất Linh , Mr Lưu Thế Thông , Mr Trần Trung Hiếu
                </div>
            </div>
        </f:view>
    </h:body>
</html>

